<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
		<style type="text/css">
			body{
				background-image: url(img/reg-mobile.jpg);
			}
			form{z-index: 10;
				margin:0 auto;
				width: 800px;height:500px;
				background-color: white;
			}
			
			.reg{text-indent: 40px;
				width: 330px;height: 40px;
				
			}
			#verify{
				width:260px ;
			}
		   	img,p{position: relative;left: 30px;}
		   	#code{
		   		position: relative;left: -8px;top: 5px;
		   	}
		   	#agree{
		   		margin-top: 30px;margin-left: 100px;
		   	}
		   	#sub{
		   		width: 180px;height: 40px;margin-top: 50px;margin-left: 80px;
		   		border-radius: 8px;
		   		background-color: dodgerblue;
		   		color: white;
		   	}
		   	
		</style>
		
		
		<script type="text/javascript">
			
			  
			
			$(document).ready(function(){
		        $("#in01").blur(checkEmail);
                $("#in02").blur(checkName);
                $("#in03").blur(checkPass);
                $("#in04").blur(checkR);
                $("#verify").blur(checkVerify);
                
                $("#regform").submit(function(){
                	var flag=true;
			if(!(checkEmail())) flag=false;
			if(!(checkName())) flag=false;
			if(!(checkR())) flag=false;
			if(!(checkPass())) flag=false;
			if(!(checkVerify())) flag=false;

        return flag;
                	
                	
                })

			})
			
			function checkEmail(){
				
				var email=$("#in01").val();
				var format=/^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;  
			    if(email==""){
			    	$("#in01").next().html("邮箱不能为空").css("color","red");
			    	return false;
			    }else if(format.test(email)==false){
			    	$("#in01").next().html("邮箱格式不正确").css("color","red");
			    	return false;
			    	
			    }else{
			        $("#in01").next().html("√").css("color","green");
			    	return true;
			    }
			}//checkemail
			
			
			function checkName(){
				var name=$("#in02").val();
				var format2=/^[a-zA-Z0-9_\u4e00-\u9fa5]{4,12}$/;
				if(name==""){
					$("#in02").next().html("昵称不能为空").css("color","red");
			    	return false;
				}else if(format2.test(name)==false){
					$("#in02").next().html("输入4-12位字符、英文、数字或者中文").css("color","red");
			    	return false;
				}else{
					$("#in02").next().html("√").css("color","green");
			    	return true;
				}
				
				
			}
			function checkPass(){
					var pass=$("#in03").val();
                    var format3=/^\w{6,16}$/;
                    if(pass==""){
                    	$("#in03").next().html("密码不能为空").css("color","red");
                    	return false;
                    }else if(format3.test(pass)==false){
                    	$("#in03").next().html("输入6-16位字符或数字、字母,区分大小写").css("color","red");
                    	return false;
                    }else{
                    	$("#in03").next().html("√").css("color","green");
                    	return true;
                    	
                    }
			
				
			}
			function checkR(){
				var pass=$("#in04").val();
                var old=$("#in03").val();
				if(pass==""){
					$("#in04").next().html("不能为空").css("color","red");
                    	return false;
				}else if(pass!=old){
					$("#in04").next().html("两次密码输入不一致，请重新填写").css("color","red");
                    	return false;
				}else{
					$("#in04").next().html("√").css("color","green");
                    	return true;
					
				}
				
				
			}
			
			function checkVerify(){
				
				var code=$("#verify").val();
				if(code=="gaae"){
					$("#verify").next().next().html("√").css("color","green");
                    	return true;
				}else{
						$("#verify").next().next().html("验证码不正确").css("color","red");
                    	return false;
				}
				
				
			}
			

		</script>
	</head>
	<body>
		<form id="regform" action="https://www.baidu.com/" method="post">
			
			<p>邮箱注册</p>
			
			
			<div>
			<img class="pic" src="img/login-input5.png" />		    
			<input id="in01" class="reg" type="text" placeholder="请输入您的常用邮箱" /><span id="first">请输入您的常用邮箱</span><br />
		   </div>
		   <div>
		   <img class="pic" src="img/login-input1.png" />

			<input id="in02" class="reg" type="text" placeholder="请输入昵称" /><span>4-12位字符、英文、数字或者中文均可</span><br />
			</div>
			<div>
			<img class="pic" src="img/login-input2.png" />

			<input id="in03" class="reg" type="password" placeholder="请输入密码" /><span>6-16位字符或数字、字母,区分大小写</span><br />
			
			</div>
			<div>
	        <img class="pic" src="img/login-input2.png" />

			<input  id="in04" class="reg" type="password" placeholder="请再次输入密码" /><span></span><br />
			</div>
             <div>
			 <img class="pic" src="img/login-input3.png" />

			<input id="verify" class="reg" placeholder="请输入右侧验证码" type="text"  />
		    <img id="code" src="img/59a11fa7365d1.png" />

			<span>不区分大小写，点击图片可更换</span><br />
			</div>
           
			<div id="agree" ><input type="checkbox" />同意用户服务条款</div>
			<input id="sub" type="submit" value="注册"  />
			
			
		</form>
		
		
	</body>
</html>
